---
title: Grok Clone
description: Customized colors and styles for a Grok look and feel
---

import { Grok } from "@/components/grok/Grok";
import { DocsRuntimeProvider } from "@/app/(home)/DocsRuntimeProvider";

## Live Demo

<div className="not-prose h-[700px]">
  <DocsRuntimeProvider>
    <Grok />
  </DocsRuntimeProvider>
</div>

## Overview

The Grok Clone example demonstrates how to customize assistant-ui to match xAI's Grok interface. This includes the characteristic light/dark theme support and minimalist design.

## Features

- **Grok Styling**: Authentic Grok look with light and dark theme support
- **Theme Support**: Light (#FDFDFD) and dark (#141414) backgrounds
- **Message Formatting**: Clean message layout with proper spacing
- **Input Design**: Grok-style rounded input field with animated send button
- **Empty State**: Welcome screen with Grok logo
- **Action Buttons**: Edit, Copy, Regenerate, and Feedback actions

## Usage

To create a Grok-style interface:

1. **Color Scheme**: Apply Grok's background colors (#FDFDFD light / #141414 dark)
2. **Typography**: Use clean, sans-serif fonts with proper hierarchy
3. **Layout Design**: Implement Grok's minimalist layout with smooth animations
4. **Component Styling**: Customize all UI elements to match Grok's aesthetic

## Code

Key styling elements for Grok clone:

- **Primary Background**: #FDFDFD (light) / #141414 (dark) for the main container
- **Input Background**: #F8F8F8 (light) / #212121 (dark) for the composer area
- **Text Colors**: #0d0d0d (light) / #e5e5e5 (dark) for content
- **Borders**: Subtle borders (#e5e5e5 light / #2a2a2a dark) for separation
- **Animations**: Smooth transitions for button states and model selector

The implementation focuses on the clean, modern aesthetic while maintaining all assistant-ui functionality.

